﻿<style>
    .page-form .bui-fluid-space-3 {
        padding-top: .2rem;
    }
    
    .page-form .bui-fluid-space-3 .bui-check {
        margin-bottom: .2rem;
    }
</style>
<div class="bui-page page-form">
    <header class="bui-bar">
        <div class="bui-bar-left"> <a class="bui-btn btn-back"><i class="icon-back"></i></a> </div>
        <div class="bui-bar-main">单选框</div>
        <div class="bui-bar-right"> </div>
    </header>
    <main>
        <div class="section-title">单选列表</div>
        <ul class="bui-list">
            <li class="bui-btn bui-box">
                <div class="span1">
                    <label for="interest1">单选按钮样式1</label>
                </div>
                <input id="interest1" type="radio" class="bui-choose" name="interest" value="" text="" checked="checked">
            </li>
            <li class="bui-btn bui-box bui-btn-line">
                <div class="span1">
                    <label for="interest2">单选按钮样式2</label>
                </div>
                <input id="interest2" type="radio" class="bui-choose" name="interest" value="" text="">
            </li>
        </ul>
        <div class="section-title">单选列表2</div>
        <ul class="bui-list">
            <li class="bui-btn bui-box">
                <input id="interest21" type="radio" class="bui-radio" name="interest2" value="" text="" checked="checked">
                <div class="span1">
                    <label for="interest21">单选按钮样式1</label>
                </div>
            </li>
            <li class="bui-btn bui-box bui-btn-line">
                <input id="interest22" type="radio" class="bui-radio" name="interest2" value="" text="">
                <div class="span1">
                    <label for="interest22">单选按钮样式2</label>
                </div>
            </li>
        </ul>
        <div class="section-title">单选列表3</div>
        <ul class="bui-list">
            <li class="bui-btn bui-box">
                <input id="interest31" type="radio" class="bui-checkbox" name="interest3" value="" text="" checked="checked">
                <div class="span1">
                    <label for="interest31">单选按钮样式1</label>
                </div>
            </li>
            <li class="bui-btn bui-box bui-btn-line">
                <input id="interest32" type="radio" class="bui-checkbox" name="interest3" value="" text="">
                <div class="span1">
                    <label for="interest32">单选按钮样式2</label>
                </div>
            </li>
        </ul>

        <div class="section-title">自定义单选</div>
        <div class="bui-fluid-space-3">
            <div class="span1">
                <input type="radio" class="bui-check" name="chongzhi1" value="50" uncheck="50元" check="50元">
            </div>
            <div class="span1">
                <input type="radio" class="bui-check" name="chongzhi1" value="100" uncheck="100元" check="100元">
            </div>
            <div class="span1">
                <input type="radio" class="bui-check" name="chongzhi1" value="200" uncheck="200元" check="200元">
            </div>
            <div class="span1">
                <input type="radio" class="bui-check" name="chongzhi1" value="300" uncheck="300元" check="300元">
            </div>
            <div class="span1">
                <input type="radio" class="bui-check" name="chongzhi1" value="500" uncheck="50元" check="50元">
            </div>
        </div>
        <main>
</div>